<template>
<div class="navMenu">  
  <template v-for="navMenu in navMenus">  
      <el-menu-item v-if="navMenu.children.length==0"  
                    :key="navMenu.id" :data="navMenu" :index="navMenu.url">  
        <i v-if="navMenu.icon"  class="iconfont iconfont-color" v-html="navMenu.icon">{{navMenu.icon}}</i>  
        <span slot="title">{{navMenu.i18nText}}</span>  
      </el-menu-item>  
      <el-submenu v-if="navMenu.children.length>0"  
                  :key="navMenu.id" :data="navMenu" :index="navMenu.id">  
        <template slot="title">  
          <i v-if="navMenu.icon"  class="iconfont iconfont-color" v-html="navMenu.icon">{{navMenu.icon}}</i>
          <span slot="title">{{navMenu.i18nText}}</span>    
        </template>  
        <MenuChild :navMenus="navMenu.children"></MenuChild>  
      </el-submenu>  
</template>  
</div>
</template>




<script>
  import axios from 'axios'
  export default {
    name: 'MenuChild',  
    props: ['navMenus']
  }

</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 300px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #99a9bf;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-tabs {
    width: 96%;
    margin: 0 auto;
  }
</style>
